<template>
  <div>
    <el-drawer
      title="注册账号"
      :before-close="cancel"
      :visible.sync="registerDialog"
      direction="ltr"
      size="35%"
      custom-class="demo-drawer"
      ref="drawer"
      @opened="opened"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="110px"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            auto-complete="new-password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" style="width: 100%">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构地址" prop="placeId">
          <el-cascader
            v-model="form.placeId"
            :options="placeId"
            @change="handleChange"
            :props="optionProps"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="desc">
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { register, getAuthPlace } from "@/api/family_doctor/family_doctor";
import { inputValidator, selectValidator,phoneValid } from "@/utils/validate";
export default {
  data() {
    return {
      registerDialog: false,
      placeId:[],
      temPlaceId: "",
      placeData: false,
      form: {
        phone: "",
        password: "",
        name: "",
        idCard: "",
        sex: "1",
        placeId: "",
        desc: "",
      },
      optionProps: {
        value: "id",
        label: "name",
        children: "childrenNodes",
      },
      formRules: {
        phone:phoneValid,
        password:inputValidator,
        name:inputValidator,
        idCard:inputValidator,
        placeId:selectValidator,
        desc:inputValidator,
      },
    };
  },
  methods: {
    cancel() {
      for (var key in this.data) {
        this.data[key] = "";
      }
      this.$refs.formRef.clearValidate();
      this.registerDialog = false;
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.form.placeId = this.temPlaceId
          register(this.form).then((res) => {
            if (res.code == "AA000000") {
              this.$message.success("注册成功！");
            }
            this.registerDialog = false;
          });
        } else return false;
      });
    },
    //供父组件调用函数
    openDialog() {
      this.getPlaceData();
      this.registerDialog = true;
    },
    opened() {},
    //获取地区
    getPlaceData() {
      getAuthPlace(this.placeData).then((res) => {
        this.recursion(res.data);
        this.placeId = res.data;
      });
    },
    // 递归
    recursion(data) {
      data.forEach((item) => {
        if (item.childrenNodes.length > 0) {
          this.recursion(item.childrenNodes);
        } else {
          item.childrenNodes = undefined;
        }
      });
    },
    //地区选择事件
    handleChange(value) {
      this.temPlaceId = value[value.length - 1];
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-drawer__footer {
  width: 100%;

  position: absolute;

  bottom: 30%;

  left: -10%;

  // border-top: 1px solid #e8e8e8;

  padding: 10px 16px;

  text-align: right;

  background-color: white;
}
</style>